// create namespace

var ds = new Ext.data.ArrayStore({
    data: [[123, 'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine'], ['10', 'Nine'], ['11', 'Eleven']],
    fields: ['value', 'text'],
    sortInfo: {
        field: 'value',
        direction: 'ASC'
    }
});

var ds = new Ext.data.JsonStore({
    url: 'atlas_list.js',
    root: 'data',
    fields: ['text', 'value']
});
ds.load();


Ext.namespace('pacp');

pacp.multiselect = new Ext.extend(Ext.Window, {
    title: 'Select Atlas Maps',
    collapsible: true,
    maximizable: true,
    width: 750,
    height: 300,
    minWidth: 300,
    minHeight: 200,
    layout: 'fit',
	selectorLabel: 'Atlas',
    plain: true,
    bodyStyle: 'padding:5px;',
    buttonAlign: 'center',
    //    renderTo: 'itemselector',
    initComponent: function(){
        this.isForm = this.buildWindow();//item selector form
        this.items = this.isForm;
		this.buttons = [this.buildButtons()];
        pacp.multiselect.superclass.initComponent.apply(this, arguments);
		//add custom event
		this.addEvents({
			submitselection: true
		})
    },
    //	onRender: function(){
    //		pacp.multiselect.superclass.onRender.apply(this, arguments);
    //	},
    store: ds,
    
    buildWindow: function(){
        var itemselector = new Ext.ux.form.ItemSelector({
            name: 'itemselector',
            fieldLabel: this.selectorLabel,
            imagePath: 'lib/dlz/images',
            multiselects: [{
                width: 250,
                height: 200,
                store: this.store,
                displayField: 'text',
                valueField: 'value'
            }, {
                width: 250,
                height: 200,
                store: [],
                tbar: [{
                    text: 'Clear',
                    handler: function(){
                        this.isForm.getForm().findField('itemselector').reset();
                    },
                    scope: this
                }]
            }]
        
        
        });
        var isForm = new Ext.form.FormPanel({
            title: '',
            width: 700,
            bodyStyle: 'padding:10px;',
            items: itemselector
            
        });
        
        return isForm
        
    },
    
    buildButtons: function(){
        return new Ext.Button({
            text: 'OK',
            handler: function(){
                if (this.isForm.getForm().isValid()) {
                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />' +
                    this.isForm.getForm().getValues(true));
					this.hide();
					//fire event
					this.fireEvent('submitselection', this.isForm.getForm().getValues(true), this)
            
                }
            },
            scope: this
        })
    }
    
});





